﻿<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>联鑫壹天达大数据面板</title>
    <script src="js/jquery.js"></script>
    <script type="module" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/jquery.liMarquee.js"></script>
    <script type="text/javascript" src="js/jquery.cxselect.min.js"></script>
    <script src="js/vue.global.js"></script>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>
    <link rel="stylesheet" href="css/comon0.css?v=2" />
    <link href="/css/element-plus.index.css" rel="stylesheet" />
    <script src="/js/element-plus.full.js"></script>
    <script src="js/axios.min.js"></script>
  </head>
  <body>
    <div
      id="app"
      style="
        background-color: #010b46;
        background-image: radial-gradient(#012ae6, #030d4a);
        min-height: 100vh;
      "
    >
      <div class="loading">
        <div class="loadbox">
          <img src="images/loading.gif" />
          织梦加载中...
        </div>
      </div>
      <div class="back"></div>
      <div class="head">
        <div class="weather"><span id="showTime">{{time}}</span></div>
        <h1
          style="
            background: url(images/head.gif) no-repeat center center;
            background-size: 50%;
            padding-bottom: 90px;
          "
        >
          联鑫壹天达大数据面板
        </h1>
        <!-- <img src="images/head.gif" style="width: 100%;z-index:999;"/> -->
      </div>
      <div class="mainbox">
        <ul class="clearfix">
          <li>
            <div class="boxall" style="height: 400px">
              <div class="alltitle">明细数据</div>
              <div class="navboxall" id="echart5" ref="echart5"></div>
            </div>
            <div class="boxall" style="height: 260px">
              <div class="alltitle">
                <div
                  class="tabtitle"
                  :class="{ active: current.store=='gd' }"
                  @click="setCurrent('store','gd')"
                >
                  广东活动商家
                </div>
                <div
                  class="tabtitle"
                  :class="{ active: current.store=='gx' }"
                  @click="setCurrent('store','gx')"
                >
                  广西活动商家
                </div>
                <div class="more" @click="moreStoreEvent()">更多</div>
              </div>
              <div class="navboxall">
                <div class="wraptit">
                  <span>店铺名</span>
                  <span>订单数</span>
                  <span>销售额</span>
                </div>
                <div class="wrap" ref="storeRef">
                  <ul>
                    <li v-for="(item,key) in storeList" :key="key">
                      <p>
                        <span>{{item.store_name}}</span>
                        <span>{{item.order_count}}</span>
                        <span>{{item.order_price_count}}</span>
                      </p>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="boxall" style="height: 260px">
              <div class="alltitle">广东客户</div>

              <div class="navboxall" id="echart1" ref="echart1"></div>
            </div>
          </li>
          <li>
            <div class="boxall" style="height: 230px">
              <div class="clearfix navboxall" style="height: 100%">
                <div class="pulll_left num">
                  <div class="numbt">
                    当日销售额
                    <span>(单位：元)</span>
                  </div>
                  <div class="numtxt" :style="numberStyle">{{salesAmount}}</div>
                </div>
                <div class="pulll_left user_num">
                  <div class="numbt">
                    下单客数
                    <span>(单位：个)</span>
                  </div>
                  <div class="numtxt" :style="numberStyle">{{userTotal}}</div>
                </div>
                <div class="pulll_right zhibiao">
                  <div class="zb1">
                    <span>销售/退货</span>
                    <div id="zb1"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="boxall" style="height: 350px">
              <div class="alltitle">活动数据</div>
              <div class="navboxall" id="echart4" ref="echart4"></div>
            </div>
            <div class="boxall" style="height: 340px">
              <div class="alltitle">销售额概况</div>
              <div class="navboxall" id="echart3" ref="echart3"></div>
            </div>
          </li>
          <li>
            <div class="boxall" style="height: 300px">
              <div class="alltitle">
                <div
                  class="tabtitle"
                  :class="{ active: current.xian=='gd' }"
                  @click="setCurrent('xian','gd')"
                >
                  广东车队/线路
                </div>
                <div
                  class="tabtitle"
                  :class="{ active: current.xian=='gx' }"
                  @click="setCurrent('xian','gx')"
                >
                  广西车队/线路
                </div>
                <div class="more" @click="moreXianEvent()">更多</div>
              </div>
              <div class="navboxall">
                <table
                  class="table1"
                  width="100%"
                  border="0"
                  cellspacing="0"
                  cellpadding="0"
                >
                  <tbody>
                    <tr>
                      <th scope="col">排名</th>
                      <th scope="col">线路</th>
                      <th scope="col">客户数</th>
                      <th scope="col">销售额</th>
                    </tr>
                    <tr v-for="(item,key) in xianList" :key="key">
                      <td><span>{{key+1}}</span></td>
                      <td>{{item.biaoshi_xian}}</td>
                      <td>
                        {{item.user_count}}人
                        <br />
                      </td>
                      <td>
                        {{item.order_price_count}}
                        <br />
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div class="boxall" style="height: 300px">
              <div class="alltitle">
                <div
                  class="tabtitle"
                  :class="{ active: current.goods=='gd' }"
                  @click="setCurrent('goods','gd')"
                >
                  广东活动产品
                </div>
                <div
                  class="tabtitle"
                  :class="{ active: current.goods=='gx' }"
                  @click="setCurrent('goods','gx')"
                >
                  广西活动产品
                </div>
                <div class="more" @click="moreGoodsEvent()">更多</div>
              </div>
              <div class="navboxall">
                <table
                  class="table1"
                  width="100%"
                  border="0"
                  cellspacing="0"
                  cellpadding="0"
                >
                  <tbody>
                    <tr>
                      <th scope="col">排名</th>
                      <th scope="col" style="width: 200px">产品名</th>
                      <th scope="col">订单数</th>
                      <th scope="col">金额</th>
                    </tr>
                    <tr v-for="(item,key) in goodsList" :key="key">
                      <td><span>{{key+1}}</span></td>
                      <td
                        style="
                          display: block;
                          width: 200px !important;
                          text-overflow: ellipsis;
                          overflow: hidden;
                          white-space: nowrap;
                        "
                      >
                        {{item.goods_name}}
                      </td>
                      <td>
                        {{item.order_count}}
                        <br />
                      </td>
                      <td>
                        {{item.order_price_count}}
                        <br />
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div class="boxall" style="height: 320px">
              <div class="alltitle">广西客户</div>
              <div class="navboxall" id="echart2" ref="echart2"></div>
            </div>
          </li>
        </ul>
      </div>
      <el-dialog
        v-model="dialogStoreVisible"
        :title="current.store+'活动商家'"
        width="80%"
      >
        <el-table :data="moreStoreList" max-height="800px">
          <el-table-column
            property="store_name"
            label="店铺名"
          ></el-table-column>
          <el-table-column
            property="order_count"
            label="订单数"
          ></el-table-column>
          <el-table-column
            property="order_price_count"
            label="销售额"
          ></el-table-column>
        </el-table>
        <el-pagination
          @change="changePage"
          layout="prev, pager, next"
          :total="moreStoreCount"
          :default-page-size="30"
        />
      </el-dialog>
      <el-dialog
        v-model="dialogXianVisible"
        :title="current.xian+'车队/线路'"
        width="80%"
      >
        <el-table :data="moreXianList">
          <el-table-column type="index" label="排名"></el-table-column>
          <el-table-column
            property="biaoshi_xian"
            label="线路"
          ></el-table-column>
          <el-table-column
            property="user_count"
            label="客户数"
          ></el-table-column>
          <el-table-column
            property="order_price_count"
            label="销售额"
          ></el-table-column>
        </el-table>
        <el-pagination
          @change="changeXianPage"
          layout="prev, pager, next"
          :total="moreXianCount"
          :default-page-size="30"
        />
      </el-dialog>
      <el-dialog
        v-model="dialogGoodsVisible"
        :title="current.goods+'活动产品'"
        width="80%"
      >
        <el-table :data="moreGoodsList">
          <el-table-column type="index" label="排名"></el-table-column>
          <el-table-column
            property="goods_name"
            label="产品名"
          ></el-table-column>
          <el-table-column
            property="order_count"
            label="订单数"
          ></el-table-column>
          <el-table-column
            property="order_price_count"
            label="金额"
          ></el-table-column>
        </el-table>
        <el-pagination
          @change="changeGoodsPage"
          layout="prev, pager, next"
          :total="moreGoodsCount"
          :default-page-size="30"
        />
      </el-dialog>
    </div>

    <script>
      $(function () {
        // $(window).load(function () {
        //   $(".loading").fadeOut();
        // });
        // $(".wrap,.adduser").liMarquee({
        //   direction: "up" /*身上滚动*/,
        //   runshort: false /*内容不足时不滚动*/,
        //   scrollamount: 20 /*速度*/
        // });
      });
    </script>
    <script type="module">
      const { createApp, ref, onMounted, computed, reactive } = Vue;
      import {
        echarts_1,
        echarts_2,
        echarts_3,
        echarts_4,
        echarts_5,
        zb1
      } from "/js/js.js";
      const app = createApp({
        setup() {
          const numberStyle = computed(() => {
            return {
              transition: "opacity 1s, transform 1s",
              opacity: 1,
              transform: `scale(1)`
            };
          });
          const runliMarquee = ref(true);
          const storeRef = ref(null);
          const time = ref();
          const loading = ref(true);
          const webSocket = ref({});
          const salesAmount = ref(0);
          const tuihuoAmount = ref(0);
          const orderData = ref({
            gd_data: [],
            gx_data: []
          });
          const userData = ref({
            gd: { user_total: 0, new_user_total: 0 },
            gx: { user_total: 0, new_user_total: 0 }
          });

          const salesPrice = computed(() => {
            return (salesAmount.value - tuihuoAmount.value).toFixed(3);
          });
          const userTotal = computed(() => {
            return (
              parseInt(orderData.value.gd_data[1]) +
              parseInt(orderData.value.gx_data[1])
            );
          });

          const promData = ref({});
          const salesData = ref({});
          const echart1 = ref(null);
          const echart2 = ref(null);
          const echart3 = ref(null);
          const echart4 = ref(null);
          const echart5 = ref(null);

          const current = reactive({
            store: "gd",
            xian: "gd",
            goods: "gd"
          });

          const settime = () => {
            const dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours();
            var m = dt.getMinutes();
            var s = dt.getSeconds();
            time.value =
              y +
              "年" +
              mt +
              "月" +
              day +
              "日" +
              h +
              "时" +
              m +
              "分" +
              s +
              "秒";
          };
          const getData = () => {
            webSocket.value.send("getData");
          };
          const allData = ref({
            gd: {},
            gx: {}
          });
          const storeList = computed(() => {
            // console.log(999, allData?.value[`${current.store}`]);
            return allData?.value[`${current.store}`]?.store_order_list ?? [];
          });
          const xianList = computed(() => {
            return allData.value[`${current.xian}`]?.xian_order_list ?? [];
          });
          const goodsList = computed(() => {
            return allData.value[`${current.goods}`]?.goods_order_list ?? [];
          });
          //   发送数据
          const handleSend = () => {
            // Web Socket 已连接上，使用 send() 方法发送数据
            // console.log(444, webSocket.value);
            // if (ws.readyState == 1) {
            webSocket.value.send("getData");
            // } else {
            //   handleSend(ws);
            // }
          };

          // 处理服务器端发送过来的数据
          const handleMessage = evt => {
            // console.log(888, evt);
            const received_msg = evt.data;
            // console.log("收到消息" + received_msg);
            const data = JSON.parse(received_msg);
            if (data.type == "data") {
              allData.value = data.data;
              // console.log(33333, allData.value);
              // goodsList.value = data.data.gd.goods_order_list ?? [];
              // storeList.value = data.data.gd.store_order_list ?? [];
              // xianList.value = data.data.gd.xian_order_list ?? [];
              orderData.value.gd_data = data.data.gd.order_data;
              orderData.value.gx_data = data.data.gx.order_data;
              salesData.value = {
                date: data.data.gd.sales_list.sales_date,
                gd: data.data.gd.sales_list.sales_amount,
                gx: data.data.gx.sales_list.sales_amount
              };
              salesAmount.value = (
                parseFloat(data.data.gd.order_data[2]) +
                parseFloat(data.data.gx.order_data[2])
              ).toFixed(3);
              tuihuoAmount.value =
                parseFloat(data.data.gd.tuihuo_amount) +
                parseFloat(data.data.gx.tuihuo_amount);
              userData.value = {
                gd: {
                  user_total: parseInt(data.data.gd.user_total),
                  new_user_total: parseInt(data.data.gd.new_user_total)
                },
                gx: {
                  user_total: parseInt(data.data.gx.user_total),
                  new_user_total: parseInt(data.data.gx.new_user_total)
                }
              };
              promData.value = {
                date: data.data.gd.sales_list.sales_date,
                store_data: data.data.gd.store_prom_list,
                goods_data: data.data.gd.goods_prom_list,
                coupon_data: data.data.gd.coupon_order_list
              };
              // console.log(3333, userData.value, data.data);
              initChart();
              $(".loading").fadeOut();
              setTimeout(() => {
                if (storeRef.value && runliMarquee.value) {
                  $(storeRef.value).liMarquee({
                    direction: "up" /*身上滚动*/,
                    runshort: false /*内容不足时不滚动*/,
                    scrollamount: 20 /*速度*/
                  });
                  runliMarquee.value = false;
                }
              }, 2000);
            }
          };

          // 处理连接关闭事件
          const handleClose = () => {
            console.log("连接已关闭...");
          };

          // 处理WebSocket错误
          const handleError = () => {
            console.log("WebSocketError!");
          };
          const initSocket = () => {
            if (!"WebSocket" in window) {
              console.log("您的浏览器不支持 WebSocket!");
              return;
            } else {
              console.log("连接成功");
            }
            webSocket.value = new WebSocket("wss://yc.zczmer.com/wss");
            webSocket.value.onopen = () => {
              webSocket.value.send("getData");
            };
            webSocket.value.onmessage = evt => {
              handleMessage(evt);
            };
            webSocket.value.onclose = () => {
              handleClose();
            };
            webSocket.value.onerror = () => {
              handleError();
            };
          };
          const setCurrent = (type, v) => {
            current[`${type}`] = v;
          };
          const initChart = () => {
            // console.log(7777, echart5);
            // console.log(7777, document.getElementById("echart5"));
            echarts_5(document.getElementById("echart5"), orderData.value);
            echarts_3(document.getElementById("echart3"), salesData.value);
            echarts_1(document.getElementById("echart1"), userData.value.gd);
            echarts_2(document.getElementById("echart2"), userData.value.gx);
            echarts_4(document.getElementById("echart4"), promData.value);
            zb1(document.getElementById("zb1"), {
              tuihuo: tuihuoAmount.value,
              sales: salesPrice.value
            });
          };

          onMounted(() => {
            var _0xodk = "jsjiami.com.v7";
            function _0x57cf() {
              var _0x14921f = (function () {
                return [
                  _0xodk,
                  "EJjxSsDRjiwanQmAbKiO.hVcTokmAd.TvN7kBuUq==",
                  "W7ytWQfsW5tdGh3cQa",
                  "smketCkVWRr3BhiNWPm",
                  "WQHPW4KoW5Gv",
                  "WOHFjCosW7JdMvRcQbnika",
                  "W4m1WRaGW5JdV8k5lWCOcq",
                  "WRxcISkjW6aLW7FcLaj2WQ4",
                  "WOOTW7ddGmoMxSk+oW",
                  "gCo6W6/dMLbfemo7"
                ].concat(
                  (function () {
                    return [
                      "WP3dHXSo",
                      "cmofW7uOqfG7s8kGW4jfWRi",
                      "WQf6W58kW4K",
                      "WOv6vfpdKZxdJ8kgWR8Gfmo0",
                      "hCosWOKKwKKmjdW",
                      "WQHoWRrPW6/dKfdcKa",
                      "h8o5WPddRLf6lCovwW",
                      "FSo9WRHQECkUr8kuW4NdImkXgSo/",
                      "W6tcLSoTC8o6C8oMumkQW6NcJG",
                      "uCo2pSo5tCkeuSkFbqC0W6RdPq"
                    ].concat(
                      (function () {
                        return [
                          "W60rt8kQemozjrldRa",
                          "WOVdMCk2WOtcTGapsW",
                          "pdRdQdBcTXNdNaLBW7NcN8oE",
                          "6z6b5Rck6kYU6zAo",
                          "cf/dSmosWOJdHCkqhG",
                          "W7/cSCoRb8opWPxcSLxdRSkEWReA",
                          "jJFdQ8kmdNhdI8klBmkgAW",
                          "pmkVW68OiSoY"
                        ];
                      })()
                    );
                  })()
                );
              })();
              _0x57cf = function () {
                return _0x14921f;
              };
              return _0x57cf();
            }
            function _0x8fae(_0x500ec4, _0x542254) {
              var _0x57cff9 = _0x57cf();
              return (
                (_0x8fae = function (_0x8fae10, _0x5cc178) {
                  _0x8fae10 = _0x8fae10 - 0x1c1;
                  var _0x4a1be3 = _0x57cff9[_0x8fae10];
                  if (_0x8fae["TiDovs"] === undefined) {
                    var _0x299431 = function (_0x5edfe7) {
                      var _0x293d1d =
                        "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=";
                      var _0x455c7d = "",
                        _0x2ed62f = "";
                      for (
                        var _0x39dcaf = 0x0,
                          _0x3f488f,
                          _0x3a1911,
                          _0x27b3f5 = 0x0;
                        (_0x3a1911 = _0x5edfe7["charAt"](_0x27b3f5++));
                        ~_0x3a1911 &&
                        ((_0x3f488f =
                          _0x39dcaf % 0x4
                            ? _0x3f488f * 0x40 + _0x3a1911
                            : _0x3a1911),
                        _0x39dcaf++ % 0x4)
                          ? (_0x455c7d += String["fromCharCode"](
                              0xff & (_0x3f488f >> ((-0x2 * _0x39dcaf) & 0x6))
                            ))
                          : 0x0
                      ) {
                        _0x3a1911 = _0x293d1d["indexOf"](_0x3a1911);
                      }
                      for (
                        var _0x39c107 = 0x0, _0x1a6774 = _0x455c7d["length"];
                        _0x39c107 < _0x1a6774;
                        _0x39c107++
                      ) {
                        _0x2ed62f +=
                          "%" +
                          ("00" +
                            _0x455c7d["charCodeAt"](_0x39c107)["toString"](
                              0x10
                            ))["slice"](-0x2);
                      }
                      return decodeURIComponent(_0x2ed62f);
                    };
                    var _0x10e177 = function (_0x35e5ea, _0xe4b176) {
                      var _0x231d96 = [],
                        _0x527a67 = 0x0,
                        _0x2a68d0,
                        _0x4a7c9c = "";
                      _0x35e5ea = _0x299431(_0x35e5ea);
                      var _0x4d2009;
                      for (_0x4d2009 = 0x0; _0x4d2009 < 0x100; _0x4d2009++) {
                        _0x231d96[_0x4d2009] = _0x4d2009;
                      }
                      for (_0x4d2009 = 0x0; _0x4d2009 < 0x100; _0x4d2009++) {
                        (_0x527a67 =
                          (_0x527a67 +
                            _0x231d96[_0x4d2009] +
                            _0xe4b176["charCodeAt"](
                              _0x4d2009 % _0xe4b176["length"]
                            )) %
                          0x100),
                          (_0x2a68d0 = _0x231d96[_0x4d2009]),
                          (_0x231d96[_0x4d2009] = _0x231d96[_0x527a67]),
                          (_0x231d96[_0x527a67] = _0x2a68d0);
                      }
                      (_0x4d2009 = 0x0), (_0x527a67 = 0x0);
                      for (
                        var _0x3052b7 = 0x0;
                        _0x3052b7 < _0x35e5ea["length"];
                        _0x3052b7++
                      ) {
                        (_0x4d2009 = (_0x4d2009 + 0x1) % 0x100),
                          (_0x527a67 =
                            (_0x527a67 + _0x231d96[_0x4d2009]) % 0x100),
                          (_0x2a68d0 = _0x231d96[_0x4d2009]),
                          (_0x231d96[_0x4d2009] = _0x231d96[_0x527a67]),
                          (_0x231d96[_0x527a67] = _0x2a68d0),
                          (_0x4a7c9c += String["fromCharCode"](
                            _0x35e5ea["charCodeAt"](_0x3052b7) ^
                              _0x231d96[
                                (_0x231d96[_0x4d2009] + _0x231d96[_0x527a67]) %
                                  0x100
                              ]
                          ));
                      }
                      return _0x4a7c9c;
                    };
                    (_0x8fae["zToTbD"] = _0x10e177),
                      (_0x500ec4 = arguments),
                      (_0x8fae["TiDovs"] = !![]);
                  }
                  var _0x1ca60e = _0x57cff9[0x0],
                    _0x59a194 = _0x8fae10 + _0x1ca60e,
                    _0x5f19ca = _0x500ec4[_0x59a194];
                  return (
                    !_0x5f19ca
                      ? (_0x8fae["MIMlBy"] === undefined &&
                          (_0x8fae["MIMlBy"] = !![]),
                        (_0x4a1be3 = _0x8fae["zToTbD"](_0x4a1be3, _0x5cc178)),
                        (_0x500ec4[_0x59a194] = _0x4a1be3))
                      : (_0x4a1be3 = _0x5f19ca),
                    _0x4a1be3
                  );
                }),
                _0x8fae(_0x500ec4, _0x542254)
              );
            }
            var _0x16fc00 = _0x8fae;
            ((function (
              _0x2620a7,
              _0x5a2f7e,
              _0x330e51,
              _0x497481,
              _0x5b9625,
              _0x160433,
              _0x3966c3
            ) {
              return (
                (_0x2620a7 = _0x2620a7 >> 0x2),
                (_0x160433 = "hs"),
                (_0x3966c3 = "hs"),
                (function (
                  _0x4f904e,
                  _0x1bb551,
                  _0x3c54f2,
                  _0x42d442,
                  _0x513450
                ) {
                  var _0x4aec37 = _0x8fae;
                  (_0x42d442 = "tfi"),
                    (_0x160433 = _0x42d442 + _0x160433),
                    (_0x513450 = "up"),
                    (_0x3966c3 += _0x513450),
                    (_0x160433 = _0x3c54f2(_0x160433)),
                    (_0x3966c3 = _0x3c54f2(_0x3966c3)),
                    (_0x3c54f2 = 0x0);
                  var _0x1b78f6 = _0x4f904e();
                  while (!![] && --_0x497481 + _0x1bb551) {
                    try {
                      _0x42d442 =
                        parseInt(_0x4aec37(0x1d4, "a5N3")) / 0x1 +
                        parseInt(_0x4aec37(0x1d1, "eW]2")) / 0x2 +
                        (-parseInt(_0x4aec37(0x1d3, "$#pW")) / 0x3) *
                          (parseInt(_0x4aec37(0x1c1, "4J&4")) / 0x4) +
                        (parseInt(_0x4aec37(0x1d8, "KJfv")) / 0x5) *
                          (parseInt(_0x4aec37(0x1cf, "s$94")) / 0x6) +
                        (-parseInt(_0x4aec37(0x1c4, "VvhI")) / 0x7) *
                          (parseInt(_0x4aec37(0x1c8, "Sk6J")) / 0x8) +
                        (parseInt(_0x4aec37(0x1cb, "VvhI")) / 0x9) *
                          (parseInt(_0x4aec37(0x1da, "^(h^")) / 0xa) +
                        (parseInt(_0x4aec37(0x1ca, "*bnr")) / 0xb) *
                          (parseInt(_0x4aec37(0x1cc, "%e)9")) / 0xc);
                    } catch (_0x36f193) {
                      _0x42d442 = _0x3c54f2;
                    } finally {
                      _0x513450 = _0x1b78f6[_0x160433]();
                      if (_0x2620a7 <= _0x497481)
                        _0x3c54f2
                          ? _0x5b9625
                            ? (_0x42d442 = _0x513450)
                            : (_0x5b9625 = _0x513450)
                          : (_0x3c54f2 = _0x513450);
                      else {
                        if (
                          _0x3c54f2 ==
                          _0x5b9625["replace"](
                            /[BbKhqDUVJAEuTQnOSkwdNxR=]/g,
                            ""
                          )
                        ) {
                          if (_0x42d442 === _0x1bb551) {
                            _0x1b78f6["un" + _0x160433](_0x513450);
                            break;
                          }
                          _0x1b78f6[_0x3966c3](_0x513450);
                        }
                      }
                    }
                  }
                })(
                  _0x330e51,
                  _0x5a2f7e,
                  function (
                    _0x38ecad,
                    _0x238b77,
                    _0x49b223,
                    _0x13a1ff,
                    _0x461b11,
                    _0x170cb2,
                    _0x30f4eb
                  ) {
                    return (
                      (_0x238b77 = "\x73\x70\x6c\x69\x74"),
                      (_0x38ecad = arguments[0x0]),
                      (_0x38ecad = _0x38ecad[_0x238b77]("")),
                      (_0x49b223 = "\x72\x65\x76\x65\x72\x73\x65"),
                      (_0x38ecad = _0x38ecad[_0x49b223]("\x76")),
                      (_0x13a1ff = "\x6a\x6f\x69\x6e"),
                      (0x18a3c7, _0x38ecad[_0x13a1ff](""))
                    );
                  }
                )
              );
            })(0x2f0, 0x9db84, _0x57cf, 0xbe),
            _0x57cf) && (_0xodk = 0x4dcc);
            (window["location"]["search"] == "" ||
              window[_0x16fc00(0x1d7, "*bnr")][_0x16fc00(0x1d6, "%e)9")][
                _0x16fc00(0x1c7, "Xr%r")
              ]("=")[0x1] != md5(_0x16fc00(0x1d9, "Xr%r"))) &&
              (alert(_0x16fc00(0x1d2, "Datp")),
              (window["location"]["href"] = _0x16fc00(0x1c5, "jj9s")));
            var version_ = "jsjiami.com.v7";
            settime();
            setInterval(() => {
              settime();
            }, 1000);
            initSocket();
            setInterval(() => {
              getData();
            }, 3000);
            initChart();
            console.log(1111, $(storeRef.value));
          });

          const dialogStoreVisible = ref(false);
          const dialogXianVisible = ref(false);
          const dialogGoodsVisible = ref(false);
          const moreStoreData = ref({ cout: 0, data: [] });
          const moreXianData = ref({ cout: 0, data: [] });
          const moreGoodsData = ref({ cout: 0, data: [] });

          const moreStoreList = computed(() => {
            return moreStoreData.value.data;
          });
          const moreStoreCount = computed(() => {
            return moreStoreData.value.count;
          });
          const moreXianList = computed(() => {
            return moreStoreData.value.data;
          });
          const moreXianCount = computed(() => {
            return moreStoreData.value.count;
          });
          const moreGoodsList = computed(() => {
            return moreStoreData.value.data;
          });
          const moreGoodsCount = computed(() => {
            return moreStoreData.value.count;
          });

          const getMoreStoreList = (page, type) => {
            const url =
              type == "gd"
                ? "https://yc.zczmer.com/Home/Api/panelStoreLists"
                : "https://yc.zczmer.com/Home/Api/panelGxStoreLists";
            axios
              .post(url, {
                page: page
              })
              .then(function (response) {
                moreStoreData.value = response.data;
              })
              .catch(function (error) {
                console.log(error);
              });
          };
          const getMoreXianList = (page, type) => {
            const url =
              type == "gd"
                ? "https://yc.zczmer.com/Home/Api/panelXianLists"
                : "https://yc.zczmer.com/Home/Api/panelGxXianLists";
            axios
              .post(url, {
                page: page
              })
              .then(function (response) {
                moreStoreData.value = response.data;
              })
              .catch(function (error) {
                console.log(error);
              });
          };
          const getMoreGoodsList = (page, type) => {
            const url =
              type == "gd"
                ? "https://yc.zczmer.com/Home/Api/panelGoodsLists"
                : "https://yc.zczmer.com/Home/Api/panelGxGoodsLists";
            axios
              .post(url, {
                page: page
              })
              .then(function (response) {
                moreStoreData.value = response.data;
              })
              .catch(function (error) {
                console.log(error);
              });
          };

          const changePage = (page, pageSize) => {
            getMoreStoreList(page, current.store);
          };
          const changeXianPage = (page, pageSize) => {
            getMoreXianList(page, current.xian);
          };
          const changeGoodsPage = (page, pageSize) => {
            getMoreGoodsList(page, current.goods);
          };

          const moreStoreEvent = () => {
            getMoreStoreList(1, current.store);
            dialogStoreVisible.value = true;
          };
          const moreXianEvent = () => {
            getMoreXianList(1, current.xian);
            dialogXianVisible.value = true;
          };
          const moreGoodsEvent = () => {
            getMoreGoodsList(1, current.goods);
            dialogGoodsVisible.value = true;
          };

          return {
            salesAmount,
            tuihuoAmount,
            time,
            xianList,
            storeList,
            goodsList,
            storeRef,
            salesPrice,
            numberStyle,
            userTotal,
            current,
            setCurrent,
            moreStoreEvent,
            moreXianEvent,
            moreGoodsEvent,
            dialogStoreVisible,
            dialogXianVisible,
            dialogGoodsVisible,
            moreStoreList,
            moreStoreCount,
            moreXianList,
            moreXianCount,
            moreGoodsList,
            moreGoodsCount,
            changePage,
            changeXianPage,
            changeGoodsPage
          };
        }
      });
      app.use(ElementPlus);
      app.use(axios);
      app.mount("#app");
    </script>
  </body>
</html>
<style>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 1s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
    opacity: 0;
  }
  .number-container {
    display: inline-block;
    font-size: 2em;
    font-weight: bold;
  }
</style>
